﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Hotel/MasterHotel.master" AutoEventWireup="true" CodeFile="Restaurant.aspx.cs" Inherits="Hotel_Restaurant" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="CSS/smartpaginator.css" rel="stylesheet" type="text/css" />
    <script src="JS/smartpaginator.js" type="text/javascript"></script><link href="CSS/text.css" rel="stylesheet" type="text/css" />
<style type="text/css">
        body
        {
            padding-top: 1px;
        }
        #wrapper
        {
            margin: 1px;
            width: 750px;
            height: 350px;
        }
        .contents
        {
            width: 91%; 
            height: 300px;
            margin: 0;
        }
        .contents > p
        {
            padding: 8px;
        }
       
        .table
        {
            width: 100%;
            border-right: solid 1px #5f9000;
        }
        .table th, .table td
        {
            width: 16%;
            height: 30px;
            padding: 4px;
            text-align: left;
        }
        .table th
        {
            border-left: solid 1px #5f9000;
        }
        .table td
        {
            border-left: solid 1px #5f9000;
            border-bottom: solid 1px #5f9000;
        }
        .header
        {
            background-color: #4f7305;
            color: White;
        }
        #divs
        {
            margin: 0;
            height: 300px;
            font: verdana;
            font-size: 14px;
            background-color: White;
        }
        #divs > div
        {
            width: 98%;
            padding: 8px;
        }
        #divs > div p
        {
            width: 95%;
            height:300px;
            padding: 8px;
        }
        ul.tab
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul.tab li
        {
            display: inline;
            padding: 5px;
            color: White;
            cursor: pointer;
        }
        #container
        {
            width: 100%;
            border: solid 1px red;
        }
    </style>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#green-contents').css('display', 'none');
             $('#black-contents').css('display', 'none');
             $('ul li').click(function () {
                 $('#red-contents').css('display', 'none');
                 $('#green-contents').css('display', 'none');
                 $('#black-contents').css('display', 'none');
                 if ($(this).attr('id') == '1') $('#red-contents').css('display', '');
                 if ($(this).attr('id') == '3') $('#black-contents').css('display', '');
             });
             $('#black').smartpaginator({ totalrecords: 12, recordsperpage: 1, datacontainer: 'divs', dataelement: 'div', initval: 0, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'black' });
             $('#red').smartpaginator({ totalrecords: 2, recordsperpage: 1, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'red', onchange: function (newPage) {
                 $('#r').html('Page # ' + newPage);
             }
             });
         });
    </script>
    <style>
        /* Shared styles */
        .drop-shadow
        {
            position: relative;
            float: left;
           /* width: 130PX;*/
           height:120px;
            padding: 0 0 2px 0;
            margin: 10px 5px 25px;
            background: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        .drop-shadow:before, .drop-shadow:after
        {
            content: "";
            position: absolute;
            z-index: -1;
        }
        .drop-shadow p
        {
            font-size: 10px;
            font-weight: bold;
            text-align:center;
        }
        /* Lifted corners */
        .lifted
        {
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        .lifted:before, .lifted:after
        {
            bottom: 15px;
            left: 10px;
            width: 50%;
            height: 20%;
            max-width: 300px;
            -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            transform: rotate(-3deg);
        }
        .lifted:after
        {
            right: 10px;
            left: auto;
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            transform: rotate(3deg);
        }
        /* Curved shadows */
        .curved:before
        {
            top: 10px;
            bottom: 5px;
            left: 0;
            right: 50%;
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
            box-shadow: 0 0 15px rgba(0,0,0,0.6);
            -moz-border-radius: 10px / 100px;
            border-radius: 10px / 100px;
        }
        .curved-vt-2:before
        {
            right: 0;
        }
        .curved-hz-1:before
        {
            top: 50%;
            bottom: 0;
            left: 10px;
            right: 10px;
            -moz-border-radius: 100px / 10px;
            border-radius: 100px / 10px;
        }
        .curved-hz-2:before
        {
            top: 0;
            bottom: 0;
            left: 10px;
            right: 10px;
            -moz-border-radius: 100px / 10px;
            border-radius: 100px / 10px;
        }
    </style>  
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="wrapper">
        <div style="height: 25px;">
            <ul class="tab">
                <li style="background-color: #E71C18; border: solid 1px #F82723;" id="1">Điểm tâm</li>               
                <li style="background-color: #1d1d1d; border: solid 1px #000;" id="3">Cơm đoàn</li>
            </ul>
        </div>
        <div id="red-contents" class="contents" style="border: solid 1px #F82723;">
           <%-- <pre>
          $('#red').smartpaginator({ totalrecords: 100, 
                                      recordsperpage: 10,
                                      theme: 'red', 
                                      onchange: function(newPage) {
                                            $('#r').html('Page # ' + newPage);
                                        }
            });
        </pre>
            <p>
                This demo shows the use of onchange callback, on each page click you'll get the
                new page no. So, you can pull data from your datasource, probably database or some
                xml file. Smart Pagination can also filter your data automatically, this is usefull
                if you only want client side pagination. Obvioulsy this will be suitable only for
                small data. Click on Demo 2 to see and example.   </p>   --%>  
                <div class="drop-shadow curved curved-hz-2">
                        <img src="/Hotel/Images/hu_tieu_nam_vang-300.jpg" width="103" height="100" />
                            <p>
                                HỦ TIẾU</p>
                        </div>
                         <div class="drop-shadow curved curved-hz-2">
                        <img src="/Hotel/Images/bit_tet_bo_uc-300.jpg" width="103" height="100" />
                            <p>
                                BÍT TẾT</p>
                        </div>
                         <div class="drop-shadow curved curved-hz-2">
                        <img src="/Hotel/Images/mi-xao-gion-300.jpg" width="103" height="100" />
                            <p>
                                MÌ XÀO</p>
                        </div>
                         <div class="drop-shadow curved curved-hz-2">
                        <img src="/Hotel/Images/pho-300.jpg" width="103" height="100" />
                            <p>
                                PHỞ</p>
                        </div>
                         <div class="drop-shadow curved curved-hz-2">
                        <img src="/Hotel/Images/BANH-MI-OPLA-300.jpg" width="103" height="100" />
                            <p>
                                OPLA</p>
                        </div>
                         <div class="drop-shadow curved curved-hz-2">
                        <img src="/Hotel/Images/bunbo-300.jpg" width="103" height="100" />
                            <p>
                                BÚN BÒ HUẾ</p>
                        </div>
                        <p></p>
                        <div class="note red rounded">
    <p>..., và nhiều món ăn đặc sản Bắc, Trung, Nam và các món Á, Âu. Đến đây, Quý Khách sẽ được thưởng thức các hương vị tuyệt vời từ những món ngon của Khách Sạn Ngọc Tùng. Xin hân hạnh được phục vụ quý khách. </p>
</div>
                   
        </div>      
        <div id="black-contents" class="contents" style="border: solid 1px #000;">           
            <div id="divs">
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD1.jpg" width="670px" height="290px" />
                </div>
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD2.jpg" width="670px" height="290px" />
                </div>
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD3.jpg" width="670px" height="290px" />
                </div>
                <div>
                   <h4></h4>
                    <img src="Images/ThucDon/TD4.jpg" width="670px" height="290px" />
                </div>
                <div>
                   <h4></h4>
                    <img src="Images/ThucDon/TD5.jpg" width="670px" height="290px" />
                </div>
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD6.jpg" width="670px" height="290px" />
                </div>
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD7.jpg" width="670px" height="290px" />
                </div>
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD8.jpg" width="670px" height="290px" />
                </div>
                <div>
                   <h4></h4>
                    <img src="Images/ThucDon/TD9.jpg" width="670px" height="290px" />
                </div>
                <div>
                   <h4></h4>
                    <img src="Images/ThucDon/TD10.jpg" width="670px" height="290px" />
                </div>
                <div>
                    <h4></h4>
                    <img src="Images/ThucDon/TD11.jpg" width="670px" height="290px" />
                </div>
                <div>
                   <h4></h4>
                    <img src="Images/ThucDon/TD12.jpg" width="670px" height="290px" />
                </div>
            </div>
            <div id="black" style="margin: auto;">
            </div>
        </div>
    </div>
</asp:Content>